<template>
	<view class="backgroud">
		<view class="love_story">
			Love Story
		</view>
		<view class>
			<input type="text" class="inputframe-s" v-model="tel" placeholder="手机号">
			<input type="password" class="inputframe-s" v-model="password" placeholder="密码">
		</view>
		<view class="gotoreg" @tap="toreg">
			还没账号？去注册 >>
		</view>
		<view class="signinbuttonframe" @tap="login()">
			<text class="signinbutton">登录</text>
		</view>
		<view class="boyandgirl">
			<image src="../../static/image.png" mode="heightFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tel: "",
				password: "",
				cpId: "",
				id: "",
				pass: true
			}
		},
		methods: {
			toreg() {
				uni.navigateTo({
					url: "/pages/registration/registration"
				})
			},
			login() {
				console.log(this.$baseUrl);
				uni.request({
					data: {
						tel: this.tel,
						password: this.password
					},
					url: this.$baseUrl + "/user/login",
					method: 'POST',
					success: (res) => {

						if (res.data.code === 0) {

							this.cpId = res.data.data.cpId
							this.id = res.data.data.id

							uni.setStorageSync('id', this.id);
							uni.setStorageSync('cpId', this.cpId);
							uni.setStorageSync("token", res.data.data.token);


							if (this.cpId === '-1') {

								uni.showToast({
									title: '加载匹配页面',
									icon: 'loading',
									duration: 1500
								})

								setTimeout(() => {
									uni.navigateTo({
										url: "/pages/inputcode/inputcode"
									})
								}, 1500)

							} else {

								uni.showToast({
										title: "登录成功",
										icon: 'success',
										duration: 1500
									}),

									setTimeout(() => {
										uni.navigateTo({
											url: "/pages/heartbeat/heartbeat"
										})
									}, 1500)
							}
						} else {
							uni.showToast({
								title: '手机号或密码错误',
								icon: 'error',
								duration: 2000
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	.backgroud {
		background: linear-gradient(197.99deg, #2C9AFF -14.52%, #9C74F3 16.96%, #EC81B4 54.17%, #F1BC97 74.34%, #F4E283 100%);
		min-height: 100vh;
		width: 100vw;
	}

	.love_story {
		margin-bottom: 100px;
		padding-top: 80px;
		margin-left: 24px;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		font-size: 36px;
		line-height: 36px;
		/* identical to box height, or 100% */

		color: #FFFFFF;
	}

	.inputframe-s {
		width: auto;
		height: 50px;
		margin-left: 24px;
		margin-top: 30px;
		margin-right: 24px;
		padding-left: 25px;
		background: #FFFFFF;
		mix-blend-mode: normal;
		opacity: 0.3;
		border-radius: 41px;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		line-height: 18px;
		/* identical to box height, or 100% */
		color: #020216;
		box-sizing: border-box;
	}

	.signinbuttonframe {
		width: auto;
		height: 40px;
		margin-left: 24px;
		margin-right: 24px;
		margin-top: 53px;
		padding-top: 16px;
		background: #FFFFFF;
		mix-blend-mode: normal;
		opacity: 0.7;
		border-radius: 41px;
		text-align: center;
	}

	.boyandgirl {
		margin-top: 25px;
		text-align: center;
		backdrop-filter: blur(2.5px);
	}

	.gotoreg {
		padding-left: 27px;
		padding-top: 20px;
		mix-blend-mode: normal;
		opacity: 0.3;
		border-radius: 41px;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		line-height: 18px;
		/* identical to box height, or 100% */
		color: #020216;
		position: relative;
		top: 10px;
		left: 10px;
	}
</style>